<template>
	<view class="list-detail">
		<img :src="detailInfo.imgUrl || '../../static/default-head.png'" alt="">
		<view>
			<view class="title">{{ detailInfo.title }}</view>
			<view class="tag-box flex">
				<view class="tag" v-for="tag in detailInfo.tags" :key="tag">{{ tag }}</view>
			</view>
			<view class="info">
				<rich-text :nodes="detailInfo.details || ''"></rich-text>
			</view>
			<view class="dist">{{ detailInfo.address || '' }}</view>
			<view class="btn flex items-center" @click="openLoadction(detailInfo)">
				<img src="../../static/daohang.png" alt="">
				<text>导航</text>
			</view>
		</view>
		<Loading ref="loading"></Loading>
	</view>
</template>

<script>
	import Loading from '@/components/loding.vue'
	import {
		request
	} from '@/utils/request.js'
	import {
		richTextImg
	} from '@/utils/utils.js'

	export default {
		data() {
			return {
				detailInfo: {},
			}
		},
		components: {
			Loading
		},
		methods: {
			openLoadction(i) {
				this.$request('/api/hlx-building/addNavigationCount', {
					id: uni.getStorageSync('userId')
				}, 'get')
				uni.openLocation({
					longitude: Number(i.positioningLng),
					latitude: Number(i.positioningLat),
					name: i.title,
					address: i.address || ''
				})
			},

		},
		onShareAppMessage() {
			const promise = new Promise(resolve => {
				this.$request('/api/type/share_title', {}, 'get').then(res => {
					const obj = res.data.data.find(item => item.dictLabel == 'xunlong_share_title')
					console.log(JSON.parse(obj?.dictValue || '[]'), obj)
					resolve({
						title: JSON.parse(obj?.dictValue || '[]')[Math.floor(Math.random() * JSON
							.parse(obj?.dictValue || '[]').length)] || '寻龙'
					})
				})
			})
			return {
				title: '自定义转发标题',
				path: '/pages/code/code',
				promise
			}
		},
		onShareTimeline() {
			// const promise = new Promise(resolve => {
			// 	this.$request('/api/type/share_title', {}, 'get').then(res => {
			// 		const obj = res.data.data.find(item => item.dictLabel == 'index_share_title')
			// 		console.log(obj)
			// 		resolve({
			// 			title: JSON.parse(obj?.dictValue || '[]')[Math.floor(Math.random() * JSON
			// 				.parse(obj?.dictValue || '[]').length)] || '黄龙溪'
			// 		})
			// 	})
			// })
			return {
				title: this.detailInfo.title,
				path: `pages/listDetail/listDetail?id=${this.detailInfo.id}&title=${this.detailInfo.title}`,
				imageUrl:this.detailInfo.imgUrl
			}
		},
		onLoad(option) {
			this.$refs.loading.init()
			this.$refs.loading.progress = 100
			// setTimeout(() => {
			// 	this.$refs.loading.destoryed()
			// }, 1000)
			uni.setNavigationBarTitle({
				title: option.title
			})
			request('/api/hlx-building/detail', {
				id: option.id
			}, 'get').then(res => {
				this.$refs.loading.destoryed()
				if (res.data.code === 200) {
					const resItem = res.data.data
					resItem.tags = resItem.introductions ? resItem.introductions.split(' ') : []
					resItem.dist = resItem.juli ? resItem.juli > 1000 ? `${resItem.juli / 1000} km` :
						`${resItem.juli} m` : ''
					resItem.details = resItem.details ? richTextImg(resItem.details) : ''
					this.detailInfo = resItem
				}
			})
		}
	}
</script>

<style lang="less" scoped>
	.list-detail {
		height: 100vh;

		>img {
			width: 750rpx;
			height: 616rpx;
		}

		>view {
			background: #fff;
			position: relative;
			top: -50rpx;
			border-top-left-radius: 32rpx;
			border-top-right-radius: 32rpx;
			padding: 40rpx;
			padding-top: 28rpx;

			.title {
				// background: pink;
				font-size: 48rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				color: #000000;
				width: 520rpx;
			}

			.tag-box {
				padding: 20rpx 0;
				flex-wrap: wrap;
				// background: skyblue;
				width: 456rpx;
			}

			.tag {
				font-size: 20rpx;
				height: 40rpx;
				line-height: 40rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				padding: 0 14rpx;
				background: #F4F4F4;
				border-radius: 700rpx;
				margin-right: 16rpx;
				margin-bottom: 10rpx;
			}

			.info {
				padding: 28rpx 40rpx;
				background: #FAFAFA;
				border-radius: 26rpx 26rpx 26rpx 26rpx;
			}

			.btn {
				position: absolute;
				top: 22rpx;
				right: 30rpx;
				width: 154rpx;
				height: 70rpx;
				background: #006FF2;
				border-radius: 70rpx;
				padding-left: 32rpx;

				>img {
					width: 24rpx;
					height: 24rpx;
				}

				>text {
					font-size: 24rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 32rpx;
					margin-left: 8rpx;
				}
			}

			.dist {
				position: absolute;
				top: 124rpx;
				right: 30rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				color: #999999;
			}
		}
	}
</style>